<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup lang="ts">
import useState from "@arco-design/web-vue/es/_hooks/use-state";
import {onMounted, reactive, ref, watchEffect} from 'vue'
import dayjs from "dayjs";
import VChart from "vue-echarts";
import {selectSignInRecordUsingGet} from "@/api/userController";
import message from "@arco-design/web-vue/es/message";

// const dataList = ref<number[]>([]); // 示例签到天数
//获取父组件传来的参数
interface Props{
    dataList:number[];
}
const props = withDefaults(defineProps<Props>(),{
    dataList:() => []
})

const year = new Date().getFullYear();
console.log(props.dataList)
const optionData = props.dataList.map((dayOfYear) => {
    console.log("dayOfYear："+dayOfYear)
    const dateStr = dayjs(`${year}-01-01`)
        .add(dayOfYear - 1, "day")
        .format("YYYY-MM-DD");
    return [dateStr, 1];
});

const option = {
    visualMap: {
        show: false,
        min: 0,
        max: 1,
        inRange: {
            // 颜色从灰色到浅绿色
            color: ["#efefef", "lightgreen"],
        },
    },
    calendar: {
        range: `${year}`,
        left: 20,
        cellSize: ['auto', 16],
        yearLabel: {
            position: "top",
            formatter: `${year}签到记录`
        }
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: optionData
    }
};
</script>

<style scoped>

</style>